<template>
    <div class="main">
        <div class="file-box-header">
            <div>
                <check-icon class="folder-icon fl" :fileData="currentFolderData"></check-icon>
                <h1>我的分享</h1>
                <div style="clear: both"></div>
            </div>
            <!--<p class="time" v-text="publicFun.rebuildTime(currentFolderData.updateTime,1)"></p>-->
        </div>
        <table class="table-head">
            <thead>
            <tr>
                <td class="checkbox" align="center">
                    <check-box  @clickBox="chooseAll" :status="true"
                                :checked="isChooseAll">
                    </check-box>
                    <!--<input type="checkbox" v-model="isChooseAll" @click="chooseAll($event)"/>-->
                </td>
                <td class="name">文件名</td>
                <td class="size">分享方式</td>
                <td class="status">失效时间</td>
                <td class="edit">操作</td>
            </tr>
            </thead>
        </table>
        <div class="file-list relative" ref="fileListBox">
            <loading v-show="pageLoading"></loading>

            <right-menu :offset="rightMenuOffset" :show="rightMenuShow" @update:show="rightMenuShow = false">
                <ul class="right-menu-box" ref="rightMenuBox">
                    <li @click="copyLink()" v-if="chooseFileList.length === 1">
                        <span style="margin-left: 20px">复制链接</span>
                    </li>
                    <li @click="deleteShare()">
                        <img class="icon" src="@/assets/icon/load/clear_icon.png">
                        <span>删除</span>
                    </li>
                </ul>
            </right-menu>

            <table>
                <tbody>
                <tr v-for="(file,key) in fileList" :key="key"
                    :class="chooseFileList.indexOf(file.id) > -1 ? 'active' : ''"
                    @click.right="showRightMenu($event,file)">
                    <td class="checkbox" align="center">
                        <check-box @clickBox="chooseFileChange($event,file)"
                                   :checked="chooseFileList.indexOf(file.id) > -1">
                        </check-box>
                        <!--<input type="checkbox" @click.stop="event($event,file)"-->
                               <!--:checked="chooseFileList.indexOf(file.id) > -1"/>-->
                    </td>
                    <td class="name">
                        <check-icon class="icon-box" :fileData="file"></check-icon>
                        <p class="fr" v-text="file.displayName"></p>
                    </td>
                    <td class="size" v-text="checkShareType(file.type)"></td>
                    <td class="status">
                        <span v-text="getExpiredTime(file.expireTime)"></span>
                    </td>
                    <!--<td v-text="file.percent ?  file.percent.toFixed(2) : '-'"></td>-->
                    <!--<td v-text="file.speed"></td>-->
                    <td class="edit">
                        <!--<a class="pointer" @click="editTask(file,'pause')">暂停</a>-->
                        <!--<a class="pointer" @click="editTask(file,'restart')">继续</a>-->
                        <!--<a class="pointer" @click="editTask(file,'cencel')">取消</a>-->
                        <button class="edit-box" @click="showRightMenu($event,file)">
                            ···
                        </button>
                    </td>
                </tr>
                </tbody>
            </table>
        </div>
        <input ref="copyInput" style="opacity: 0;">

    </div>

</template>
<script>
  import CheckIcon from '@/components/CheckIcon.vue'
  import RightMenu from '@/components/RightMenu.vue'
  import Loading from '@/components/Loading.vue'

  export default {
    name: "overList",
    components: {
      CheckIcon,
      RightMenu,
      Loading
    },
    data() {
      return {
        pageLoading: false,
        fileList: [],
        chooseFileData: {},
        isChooseAll: false,
        chooseFileList: [],
        currentFolderData: {
          isHone: true
        },
        rightMenuShow: true,
        rightMenuOffset: {
          left: 0,
          top: 0
        },
        windwoSize: {
          height: 700,
          width: 1100
        },
      }
    },
    props: {
      companyId: {
        type: String,
        default: function () {
          return ''
        }
      }
    },
    watch: {
      companyId: function () {
        this.getFileList()
      }
    },
    mounted() {
      const that = this;
      document.oncontextmenu = function () {
        return false;
      }
      this.windwoSize = {
        height: document.body.scrollHeight,
        width: document.body.clientWidth
      }
      window.onresize = function () {
        that.windwoSize = {
          height: document.body.clientHeight,
          width: document.body.clientWidth
        }
      }
      if (this.companyId !== '') {
        this.getFileList()
      }
    }, methods: {
      deleteShare: function () {
        this.rightMenuShow = false
        const that = this
        let status = 0
        this.chooseFileList.forEach(function (id) {
          that.$http.get('/pan/recallShareFile/' + id).then(function () {
            status = status + 1
            if (that.chooseFileList.length === status) {
              that.getFileList()
            }
          })
        })
      },
      copyLink:function(){
        const that = this
        const chooseData = this.fileList.find(function (value) {
          return that.chooseFileList[0] === value.id
        })
        if(!chooseData){
          return this.$message({
            type:'error',
            message:'请选择要复制的链接'
          })
        }else{
          let input = this.$refs.copyInput
          const shareLink = window.location.origin + that.$config.shareLink + chooseData.codeUrl

          let text = '【担当云盘】为您带来高效的文件存储于传输体验！ 分享链接：' + shareLink
          if (chooseData.password !== '') {
            text = text + '  提取码: ' + chooseData.password ; // 修改文本框的内容
          }
          input.value = text
          input.select(); // 选中文本
          document.execCommand("copy");
          this.$message({
            type: 'success',
            message: '复制成功'
          })
        }
        this.rightMenuShow = false
      },
      checkShareType: function (type) {
        if (type === 1) {
          return '加密分享'
        } else if (type === 2) {
          return '公开分享'
        } else if (type === 3) {
          return '手机号分享'
        }
      },
      getExpiredTime: function (time) {
        if (time === 4000000000000) {
          return '永久有效'
        } else {
          return this.publicFun.rebuildTime(time, 3)
        }

      },
      getFileList: function () {
        const that = this
        this.pageLoading = true
        this.$http.get('/pan/shareFiles/false/' + this.companyId + '/1/100000').then(function (data) {
          that.pageLoading = false
          if (data.data.code === 1) {
            that.fileList = data.data.data
          }
        })
      },

      showRightMenu: function (event, fileData) {
        this.chooseFileData = fileData
        if (this.chooseFileList.indexOf(String(fileData.id)) === -1) {
          this.chooseFileList = [fileData.id]
        }
        console.log(event)
        this.rightMenuOffset.left = Math.min(event.pageX, this.windwoSize.width - 150)
        this.rightMenuOffset.top = Math.min(event.pageY, this.windwoSize.height -330)
        console.log(this.rightMenuOffset)
        this.rightMenuShow = true
      },
      chooseAll: function (checked) {
        this.chooseFileList = []
        const that = this
        this.isChooseAll = checked
        if (checked) {
          this.fileList.forEach(function (fileData) {
            that.chooseFileList.push(fileData.id)
          })
        }
      },

      checkChooseAll: function () {
        if (this.chooseFileList.length !== 0 && this.chooseFileList.length === this.fileList.length) {
          this.isChooseAll = true
        } else {
          this.isChooseAll = false
        }
      },

      chooseFileChange: function (checked, fileData) {
        const index = this.chooseFileList.indexOf(fileData.id)
        if (checked) {
          if (index === -1) {
            this.chooseFileList.push(fileData.id)
            this.checkChooseAll()
          }
        } else {
          if (index !== -1) {
            this.chooseFileList.splice(index, 1)
            this.checkChooseAll()
          }
        }
      },
      clearLoadOver: function () {
        this.fileList = this.$ipcRenderer.sendSync('clearLodeOverList')
      },
      showLocalFolder: function (fileData) {
        console.log(fileData)
        // this.testDwonload(fileData)
        this.$shell.showItemInFolder(this.chooseFileData.path)
      },
      deleteLoadOver: function () {
        const that = this
        const fileDatas = this.fileList.filter(function (value) {
          return that.chooseFileList.indexOf(value.id) > -1
        })
        this.fileList = this.$ipcRenderer.sendSync('deleteLoadOverFile', fileDatas)
      },

      checkLoadType: function (loadType) {
        console.log(loadType)
        if (loadType === 'download') {
          return '下载成功'
        } else if (loadType === 'upload') {
          return '上传成功'
        } else if (loadType === 'fastUpload') {
          return '极速秒传'
        }
      }
    }
  }
</script>

<style scoped lang="css" src="@/assets/css/load-page.css"></style>
<style scoped>

    .main {
        padding: 21px 9px 0 10px;
        box-sizing: border-box;
    }

    .file-box-header {
        height: 45px;
        border-bottom: #E0E1EA solid 1px;
    }

    .file-box-header .time {
        font-size: 12px;
        color: #F2F5FC;
        letter-spacing: 0.86px;
        padding-left: 81px;
        line-height: 17px;
        margin-top: 6px;
    }

    .file-box-header .folder-icon {
        height: 24px;
        width: 26px;
        margin-top: 0px;
        margin-left: 30px;
        margin-right: 20px;
        transform: scale(1.4);
    }

    .file-box-header h1 {
        font-size: 14px;
        line-height: 25px;
        margin-left: 20px;
    }

</style>
